<template>
    <div class="technical-page-product-container">

        <div class="technical-page-panel">
            <div class="technical-page-items-panel" v-for="item in technicalList" :key="item.id">
                <div class="technical-page-box">{{ item.model }}</div>
                <div class="technical-page-box-desc">查找指南、代码示例、架构图、最佳实践、教程、API 参考文档等，了解如何在AIP上构建应用。</div>
                <div class="item-list-box">
                    <ul>
                        <li class="technical-page-item" v-for="i in item.services" :key="i.id">
                            <div class="item-title">{{ i.name }}</div>
                            <div class="item-desc">{{ i.desc }}</div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

    </div>
</template>

<script>

export default {
    data() {
        return {
            technicalList: [
                {
                    "id": 1,
                    "model": "规范管理",
                    "services": [
                        {
                            "id": 1,
                            "name": "代码风格规范",
                            "desc": "规定代码的编写风格和规范，以提高代码的可读性和可维护性。",
                            "code": "代码风格规范"
                        },
                        {
                            "id": 2,
                            "name": "API接口规范",
                            "desc": "定义API接口的设计规范和约定，以确保接口的一致性和易用性。",
                            "code": "API接口规范"
                        },
                        {
                            "id": 3,
                            "name": "前端规范",
                            "desc": "规定前端开发的规范和最佳实践，以提高前端代码的质量和性能。",
                            "code": "前端规范"
                        },
                        {
                            "id": 4,
                            "name": "前端工程规范",
                            "desc": "定义前端工程的组织结构和构建流程，以提高前端开发的效率和可维护性。",
                            "code": "前端工程规范"
                        },
                        {
                            "id": 5,
                            "name": "服务工程规范",
                            "desc": "规定服务端开发的规范和最佳实践，以确保服务的稳定性和可扩展性。",
                            "code": "服务工程规范"
                        },
                        {
                            "id": 6,
                            "name": "数据开发规范",
                            "desc": "定义数据开发的规范和流程，以确保数据的准确性和一致性。",
                            "code": "数据开发规范"
                        },
                        {
                            "id": 7,
                            "name": "数据治理规范",
                            "desc": "规定数据治理的策略和实施方法，以确保数据的质量和安全性。",
                            "code": "数据治理规范"
                        },
                        {
                            "id": 8,
                            "name": "运维管理规范",
                            "desc": "定义运维管理的流程和规范，以确保系统的稳定性和可靠性。",
                            "code": "运维管理规范"
                        },
                        {
                            "id": 9,
                            "name": "反向代理规范",
                            "desc": "规定反向代理的配置和使用规范，以提供安全和高性能的访问方式。",
                            "code": "反向代理规范"
                        },
                        {
                            "id": 10,
                            "name": "接口开发规范",
                            "desc": "定义接口开发的规范和约定，以确保接口的一致性和可用性。",
                            "code": "接口开发规范"
                        },
                        {
                            "id": 11,
                            "name": "版本管理规范",
                            "desc": "规定版本管理的策略和实施方法，以确保代码的版本控制和追踪。",
                            "code": "版本管理规范"
                        },
                        {
                            "id": 12,
                            "name": "推理Prompt规范",
                            "desc": "定义推理Prompt的编写规范和最佳实践，以提高推理模型的质量和效果。",
                            "code": "推理Prompt规范"
                        }
                    ]
                },
                {
                    "id": 1,
                    "model": "父类技术",
                    "services": [
                        {
                            "id": 1,
                            "name": "Nexus仓库集成",
                            "desc": "集成Nexus仓库，用于管理和发布项目依赖的软件包。",
                            "code": "01_Nexus仓库集成.md"
                        },
                        {
                            "id": 2,
                            "name": "集成revision统一版本号",
                            "desc": "统一项目中各个模块的版本号，以确保版本的一致性和可追踪性。",
                            "code": "02_集成revision统一版本号.md"
                        },
                        {
                            "id": 3,
                            "name": "集成镜像仓库",
                            "desc": "集成镜像仓库，用于存储和管理项目的镜像文件。",
                            "code": "03_集成镜像仓库.md"
                        },
                        {
                            "id": 4,
                            "name": "集成非root账号运行",
                            "desc": "配置项目在非root账号下运行，以提高系统的安全性和稳定性。",
                            "code": "04_集成非root账号运行.md"
                        }
                    ]
                },

                {
                    "id": 2,
                    "model": "基础功能",
                    "services": [
                        {
                            "id": 1,
                            "name": "分布式框架",
                            "desc": "实现分布式系统的基础框架，提供分布式协调、通信和容错等功能。",
                            "code": "01_分布式框架.md"
                        },
                        {
                            "id": 2,
                            "name": "公共依赖包",
                            "desc": "封装常用的公共功能和工具类，提供给项目的其他模块使用。",
                            "code": "02_公共依赖包.md"
                        },
                        {
                            "id": 3,
                            "name": "服务容器化",
                            "desc": "将服务部署到容器中，实现服务的快速部署、弹性伸缩和管理。",
                            "code": "03_服务容器化.md"
                        },
                        {
                            "id": 4,
                            "name": "代码生成器",
                            "desc": "根据指定的模板和配置信息，自动生成代码文件，提高开发效率。",
                            "code": "04_代码生成器.md"
                        },
                        {
                            "id": 5,
                            "name": "MyBatis操作集成",
                            "desc": "集成MyBatis框架，简化数据库操作，提供ORM功能。",
                            "code": "05_MyBatis操作集成.md"
                        },
                        {
                            "id": 6,
                            "name": "按钮权限",
                            "desc": "集成细粒化权限配置，实现基于角色和权限的按钮级别的访问控制。",
                            "code": "06_按钮权限.md"
                        },
                        {
                            "id": 7,
                            "name": "单点登录",
                            "desc": "实现用户在多个系统中的单一登录认证，提供统一的用户体验。",
                            "code": "07_单点登录.md"
                        },
                        {
                            "id": 8,
                            "name": "租户集成",
                            "desc": "支持多租户的系统架构，实现租户之间的数据隔离和资源共享。",
                            "code": "07_租户集成.md"
                        },
                        {
                            "id": 9,
                            "name": "多服务集成",
                            "desc": "将多个服务集成到一个统一的系统中，实现功能的整合和共享。",
                            "code": "08_多服务集成.md"
                        },
                        {
                            "id": 10,
                            "name": "前端集成",
                            "desc": "将前端资源集成到后端项目中，提供一体化的开发和部署。",
                            "code": "09_前端集成.md"
                        },
                        {
                            "id": 11,
                            "name": "本地调试",
                            "desc": "在开发环境中进行本地调试，快速验证功能和排查问题。",
                            "code": "09_本地调试.md"
                        },
                        {
                            "id": 12,
                            "name": "多平台发布集成",
                            "desc": "支持将应用程序发布到多个平台，如云平台、容器平台等。",
                            "code": "09_多平台发布集成.md"
                        },
                        {
                            "id": 13,
                            "name": "异常处理",
                            "desc": "统一处理系统中的异常情况，提供友好的错误提示和异常日志记录。",
                            "code": "13_异常处理.md"
                        },
                        {
                            "id": 14,
                            "name": "日志处理",
                            "desc": "记录系统运行时的日志信息，方便故障排查和系统监控。",
                            "code": "14_日志处理.md"
                        },
                        {
                            "id": 15,
                            "name": "Redis缓存使用",
                            "desc": "使用Redis作为缓存存储，提高系统的访问性能和响应速度。",
                            "code": "15_Redis缓存使用.md"
                        },
                        {
                            "id": 16,
                            "name": "页面搜索",
                            "desc": "实现对页面内容的全文搜索和关键字搜索功能。",
                            "code": "15_页面搜索.md"
                        },
                        {
                            "id": 17,
                            "name": "分布式Redis缓存使用",
                            "desc": "在分布式系统中使用Redis作为缓存存储，提高系统的可扩展性和性能。",
                            "code": "17_分布式Redis缓存使用.md"
                        },
                        {
                            "id": 18,
                            "name": "系统日志",
                            "desc": "记录系统的运行日志和操作日志，用于系统监控和审计。",
                            "code": "18_系统日志.md"
                        },
                        {
                            "id": 19,
                            "name": "消息使用",
                            "desc": "实现系统内部的消息传递和通信，支持异步处理和解耦。",
                            "code": "19_消息使用.md"
                        },
                        {
                            "id": 20,
                            "name": "日志埋点",
                            "desc": "在系统中埋点记录用户行为和操作日志，用于分析和统计。",
                            "code": "20_日志埋点.md"
                        },
                        {
                            "id": 21,
                            "name": "SwaggerUI文档",
                            "desc": "使用SwaggerUI生成API文档，方便接口的查看和测试。",
                            "code": "21_SwaggerUI文档.md"
                        },
                        {
                            "id": 22,
                            "name": "多数据库源",
                            "desc": "支持在一个系统中使用多个数据库，实现数据的分库分表和读写分离。",
                            "code": "22_多数据库源.md"
                        },
                        {
                            "id": 23,
                            "name": "配置加密",
                            "desc": "对敏感配置信息进行加密处理，提高系统的安全性。",
                            "code": "23_配置加密.md"
                        },
                        {
                            "id": 24,
                            "name": "表单提交校验",
                            "desc": "对用户提交的表单数据进行校验，确保数据的合法性和完整性。",
                            "code": "24_表单提交校验.md"
                        },
                        {
                            "id": 25,
                            "name": "Excel导入_导出",
                            "desc": "实现Excel文件的导入和导出功能，方便数据的批量操作。",
                            "code": "25_Excel导入_导出.md"
                        },
                        {
                            "id": 26,
                            "name": "文件上传",
                            "desc": "实现文件的上传功能，支持文件类型验证和大小限制。",
                            "code": "26_文件上传.md"
                        },
                        {
                            "id": 27,
                            "name": "XSS攻击防护",
                            "desc": "防止跨站脚本攻击，对用户输入的数据进行过滤和转义。",
                            "code": "27_XSS攻击防护.md"
                        },
                        {
                            "id": 28,
                            "name": "多数据源分库分表",
                            "desc": "将数据按照规则分散存储到多个数据库中，提高系统的扩展性和性能。",
                            "code": "28_多数据源分库分表.md"
                        },
                        {
                            "id": 29,
                            "name": "多数据源动态加载卸载",
                            "desc": "动态加载和卸载数据源，实现数据源的动态切换和管理。",
                            "code": "29_多数据源动态加载卸载.md"
                        },
                        {
                            "id": 30,
                            "name": "多数据源事务",
                            "desc": "在多数据源环境下实现分布式事务的一致性和隔离性。",
                            "code": "30_多数据源事务.md"
                        },
                        {
                            "id": 31,
                            "name": "CDN配置",
                            "desc": "配置内容分发网络（CDN）加速，提高静态资源的访问速度。",
                            "code": "31_CDN配置.md"
                        },
                        {
                            "id": 32,
                            "name": "多种环境部署",
                            "desc": "支持在不同的环境中部署应用程序，如开发环境、测试环境和生产环境。",
                            "code": "32_多种环境部署.md"
                        },
                        {
                            "id": 33,
                            "name": "分布式定时任务",
                            "desc": "实现分布式环境下的定时任务调度和执行，同时提供多个平台的自动化任务管理",
                            "code": "33_分布式定时任务.md"
                        },
                        {
                            "id": 34,
                            "name": "分布式锁",
                            "desc": "实现分布式环境下的锁机制，保证数据的一致性和并发控制",
                        },
                        {
                            "id": 34,
                            "name": "权限管理",
                            "desc": "实现对系统资源的访问控制和权限管理，确保数据的安全性和保密性。",
                            "code": "34_权限管理.md"
                        },
                        {
                            "id": 35,
                            "name": "数据加密",
                            "desc": "对敏感数据进行加密处理，保护数据的机密性和完整性。",
                            "code": "35_数据加密.md"
                        },
                        {
                            "id": 36,
                            "name": "单点登录",
                            "desc": "实现用户在多个应用系统中的单一身份认证和登录。",
                            "code": "36_单点登录.md"
                        },
                        {
                            "id": 37,
                            "name": "分布式锁",
                            "desc": "在分布式系统中实现分布式锁，确保共享资源的安全访问。",
                            "code": "37_分布式锁.md"
                        },
                        {
                            "id": 38,
                            "name": "消息队列",
                            "desc": "实现系统间的异步通信和解耦，提高系统的可伸缩性和可靠性。",
                            "code": "38_消息队列.md"
                        },
                        {
                            "id": 39,
                            "name": "分布式事务",
                            "desc": "在分布式环境中实现跨多个服务的事务一致性和隔离性。",
                            "code": "39_分布式事务.md"
                        },
                        {
                            "id": 40,
                            "name": "服务监控",
                            "desc": "对系统的运行状态和性能进行监控和统计，及时发现和解决问题。",
                            "code": "40_服务监控.md"
                        },
                        {
                            "id": 41,
                            "name": "容器化部署",
                            "desc": "使用容器技术将应用程序打包成镜像，并在容器平台上进行部署和管理。",
                            "code": "41_容器化部署.md"
                        },
                        {
                            "id": 42,
                            "name": "自动化测试",
                            "desc": "使用自动化测试工具对系统进行功能测试和性能测试，提高测试效率和质量。",
                            "code": "42_自动化测试.md"
                        }
                    ]
                },

                {
                    "id": 1,
                    "model": "前端技术",
                    "services": [
                        {
                            "id": 1,
                            "name": "普通JWT前后端登录",
                            "desc": "实现基于JWT的前后端身份验证和安全通信，确保安全性和数据传输的完整性。",
                            "code": "03_前端技术/01_普通JWT前后端登录.md"
                        },
                        {
                            "id": 2,
                            "name": "单点登录",
                            "desc": "实现用户在多个应用中的统一身份认证和便捷访问，提供统一的安全管理。",
                            "code": "03_前端技术/02_单点登录.md"
                        },
                        {
                            "id": 3,
                            "name": "菜单权限集成",
                            "desc": "集成动态菜单控制，实现精细的权限管理和访问控制，只能访问其具备权限的菜单。",
                            "code": "03_前端技术/03_菜单权限集成.md"
                        },
                        {
                            "id": 4,
                            "name": "权限注解",
                            "desc": "使用注解方式实现权限控制，简化代码开发和维护，提高开发效率和代码可读性。",
                            "code": "03_前端技术/04_权限注解.md"
                        },
                        {
                            "id": 5,
                            "name": "数据权限",
                            "desc": "实现数据级别的权限控制，保护敏感数据免受未授权访问，确保数据的安全性。",
                            "code": "03_前端技术/05_数据权限.md"
                        },
                        {
                            "id": 6,
                            "name": "参数和代码集成",
                            "desc": "灵活配置参数和代码，实现定制化的功能扩展，满足不同场景下的个性化需求。",
                            "code": "03_前端技术/06_参数和代码集成.md"
                        },
                        {
                            "id": 7,
                            "name": "CORS集成",
                            "desc": "实现跨域资源共享，确保安全的跨域数据交互，提高系统的灵活性和数据的可访问性。",
                            "code": "03_前端技术/07_CORS集成.md"
                        },
                        {
                            "id": 8,
                            "name": "黑白名单路径请求",
                            "desc": "通过路径访问控制，加强应用的安全性和防护能力，阻止未授权的访问和恶意攻击。",
                            "code": "03_前端技术/08_黑白名单路径请求.md"
                        },
                        {
                            "id": 9,
                            "name": "安全验证码集成",
                            "desc": "集成安全验证码功能，防止恶意攻击和提高系统安全性，用户身份的真实性和可信度。",
                            "code": "03_前端技术/09_安全验证码集成.md"
                        },
                        {
                            "id": 10,
                            "name": "前端异常",
                            "desc": "处理前端异常情况，提高应用的稳定性和用户体验，系统的可靠性和用户的满意度。",
                            "code": "03_前端技术/10_前端异常.md"
                        },
                        {
                            "id": 11,
                            "name": "公共前端返回对象",
                            "desc": "定义公共的前端返回对象，用于统一格式化前端返回数据的结构和内容。",
                            "code": "03_前端技术/11_公共前端返回对象.md"
                        },
                        {
                            "id": 12,
                            "name": "数据请求分页",
                            "desc": "实现数据请求的分页功能，方便前端对大量数据进行分页展示和处理。",
                            "code": "03_前端技术/12_数据请求分页.md"
                        },
                        {
                            "id": 13,
                            "name": "代码过滤转换",
                            "desc": "对代码进行过滤和转换，提供代码优化和转换的功能，提高代码的执行效率和可读性。",
                            "code": "03_前端技术/13_代码过滤转换.md"
                        },
                        {
                            "id": 14,
                            "name": "会话管理",
                            "desc": "管理用户会话信息，包括登录状态，确保用户身份的安全和会话的可靠性。",
                            "code": "03_前端技术/14_会话管理.md"
                        },
                        {
                            "id": 15,
                            "name": "公共API",
                            "desc": "定义公共的API接口，提供统一的接口规范，方便前端与后端进行通信和数据交互。",
                            "code": "03_前端技术/15_公共API.md"
                        },
                        {
                            "id": 16,
                            "name": "代码转换插件机制",
                            "desc": "实现代码转换的插件机制，允许开发者根据需求自定义代码转换功能。",
                            "code": "03_前端技术/16_代码转换插件机制.md"
                        },
                        {
                            "id": 18,
                            "name": "获取当前用户注解",
                            "desc": "使用注解获取当前用户信息，获取用户信息的操作，提高代码的可读性和开发效率。",
                            "code": "03_前端技术/18_获取当前用户注解制.md"
                        },
                        {
                            "id": 19,
                            "name": "存储接口集成",
                            "desc": "集成存储接口功能，提供方便的数据存储和访问接口，简化数据的存储和操作过程。",
                            "code": "03_前端技术/19_存储接口集成.md"
                        },
                        {
                            "id": 20,
                            "name": "非存储接口集成",
                            "desc": "集成非存储接口功能，，实现与外部系统的数据交互和集成。",
                            "code": "03_前端技术/20_非存储接口集成.md"
                        },
                        {
                            "id": 21,
                            "name": "通知组件集成",
                            "desc": "集成通知组件功能，实现消息通知和提醒功能，增强用户体验和系统的实时性。",
                            "code": "03_前端技术/21_通知组件集成.md"
                        }
                    ]
                },

                {
                    "id": 1,
                    "model": "安全过滤",
                    "services": [
                        {
                            "id": 1,
                            "name": "接口API数据加密和解密",
                            "desc": "确保接口API数据的安全性和机密性，保护敏感信息",
                            "code": "01_接口API数据加密和解密.md"
                        },
                        {
                            "id": 2,
                            "name": "接口API的限流配置",
                            "desc": "限制接口API的访问频率，防止滥用和超载请求",
                            "code": "02_接口API的限流配置.md"
                        },
                        {
                            "id": 3,
                            "name": "接口API的文件上传安全限制",
                            "desc": "实施文件上传的安全限制和验证措施，防止恶意文件",
                            "code": "03_接口API的文件上传安全限制.md"
                        },
                        {
                            "id": 4,
                            "name": "接口API的防重复提交",
                            "desc": "防止接口API的重复提交操作，确保数据一致性",
                            "code": "04_接口API的防重复提交.md"
                        },
                        {
                            "id": 5,
                            "name": "接口API的防SQL注入_防XSS攻击",
                            "desc": "防止接口API受到SQL注入和XSS攻击，保护系统安全",
                            "code": "05_接口API的防SQL注入_防XSS攻击.md"
                        },
                        {
                            "id": 6,
                            "name": "接口API的全加密交互",
                            "desc": "实现接口API的全程加密通信，保障数据传输安全",
                            "code": "06_接口API的全加密交互.md"
                        },
                        {
                            "id": 7,
                            "name": "接口API防越权配置",
                            "desc": "配置接口API的访问权限，防止越权操作和数据泄露",
                            "code": "07_接口API防越权配置.md"
                        },
                        {
                            "id": 8,
                            "name": "身份验证和授权",
                            "desc": "确保接口API的身份验证和授权机制，保护资源安全",
                            "code": "08_身份验证和授权.md"
                        },
                        {
                            "id": 9,
                            "name": "强化密码策略",
                            "desc": "实施强化的密码策略和安全性要求，防止密码破解",
                            "code": "09_强化密码策略.md"
                        },
                        {
                            "id": 10,
                            "name": "输入验证和过滤",
                            "desc": "验证和过滤接口API的输入数据，防止恶意输入",
                            "code": "10_输入验证和过滤.md"
                        },
                        {
                            "id": 11,
                            "name": "安全漏洞扫描",
                            "desc": "定期扫描和修复接口API的安全漏洞，保护系统免受攻击",
                            "code": "11_安全漏洞扫描.md"
                        },
                        {
                            "id": 12,
                            "name": "异常处理和错误信息",
                            "desc": "处理接口API的异常情况和提供详细错误信息，提升用户体验",
                            "code": "12_异常处理和错误信息.md"
                        },
                        {
                            "id": 13,
                            "name": "数据存储安全",
                            "desc": "确保接口API数据存储的安全性和完整性，防止数据泄露",
                            "code": "13_数据存储安全.md"
                        }, {
                            "id": 14,
                            "name": "数据审计",
                            "desc": "记录和审计接口API的数据访问和操作，确保数据的合规性",
                            "code": "14_数据审计.md"
                        },
                        {
                            "id": 15,
                            "name": "数据敏感词过滤",
                            "desc": "过滤和屏蔽接口API中的敏感词汇，保护用户隐私",
                            "code": "15_数据敏感词过滤.md"
                        },
                        {
                            "id": 16,
                            "name": "数据范围",
                            "desc": "限制接口API返回数据的范围和访问权限，确保数据安全性",
                            "code": "16_数据范围.md"
                        },
                        {
                            "id": 17,
                            "name": "表结构自动维护",
                            "desc": "自动维护接口API所涉及的表结构，提高数据一致性",
                            "code": "17_表结构自动维护.md"
                        },
                        {
                            "id": 18,
                            "name": "字段数据绑定",
                            "desc": "实现接口API字段和数据的绑定关系，确保数据准确性",
                            "code": "18_字段数据绑定.md"
                        },
                        {
                            "id": 19,
                            "name": "虚拟属性绑定",
                            "desc": "绑定接口API的虚拟属性和实际数据，提供更丰富的数据视图",
                            "code": "19_虚拟属性绑定.md"
                        },
                        {
                            "id": 20,
                            "name": "字段加密解密",
                            "desc": "对接口API的字段进行加密和解密，保护敏感数据",
                            "code": "20_字段加密解密.md"
                        },
                        {
                            "id": 21,
                            "name": "字段脱敏",
                            "desc": "对接口API的字段进行脱敏处理，保护敏感信息",
                            "code": "21_字段脱敏.md"
                        },
                        {
                            "id": 22,
                            "name": "日志和监控",
                            "desc": "记录和监控接口API的运行日志和指标，及时发现异常",
                            "code": "22_日志和监控.md"
                        },
                        {
                            "id": 23,
                            "name": "日志输出打印安全",
                            "desc": "确保接口API的日志输出安全性，防止信息泄露",
                            "code": "23_日志输出打印安全.md"
                        },
                        {
                            "id": 24,
                            "name": "双因子认证安全",
                            "desc": "实施双因子认证提高接口API的安全性，防止未授权访问",
                            "code": "24_双因子认证安全.md"
                        }
                    ]
                },
                {
                    "id": 1,
                    "model": "前端UI",
                    "services": [

                        {
                            "id": 1,
                            "name": "界面布局",
                            "desc": "用于定义前端界面的布局结构，包括页面元素的排列和组织方式。",
                            "code": "01_界面布局.md"
                        },
                        {
                            "id": 2,
                            "name": "文件上传",
                            "desc": "实现文件上传功能，允许用户将文件从客户端上传到服务器，用于存储和共享文件。",
                            "code": "02_文件上传.md"
                        },
                        {
                            "id": 3,
                            "name": "菜单列表",
                            "desc": "展示系统菜单的列表形式，方便用户浏览和导航系统功能。",
                            "code": "03_菜单列表.md"
                        },
                        {
                            "id": 4,
                            "name": "切换缓存",
                            "desc": "提供切换系统缓存的开关，用于控制缓存的启用或禁用状态，以优化系统性能。",
                            "code": "04_切换缓存.md"
                        },
                        {
                            "id": 5,
                            "name": "自定义主题",
                            "desc": "允许用户自定义系统的主题样式，包括颜色、字体等，以满足个性化需求。",
                            "code": "05_自定义主题.md"
                        },
                        {
                            "id": 6,
                            "name": "临时锁屏",
                            "desc": "提供临时锁屏功能，当用户离开电脑一段时间后自动锁定屏幕，保护用户隐私和系统安全。",
                            "code": "06_临时锁屏.md"
                        },
                        {
                            "id": 7,
                            "name": "图片查看",
                            "desc": "实现图片的预览和查看功能，用户可以浏览和放大缩小图片，方便查看细节。",
                            "code": "07_图片查看.md"
                        },
                        {
                            "id": 8,
                            "name": "分页列表",
                            "desc": "使用分页方式进行分段展示，提供翻页功能，以便用户浏览和管理数据。",
                            "code": "08_分页列表.md"
                        },
                        {
                            "id": 9,
                            "name": "服务支持列表",
                            "desc": "展示系统提供的各种服务支持的列表，包括技术支持、客户服务等。",
                            "code": "09_服务支持列表.md"
                        },
                        {
                            "id": 10,
                            "name": "平台功能介绍",
                            "desc": "介绍平台提供的各种功能和特性，帮助用户了解平台的能力和优势。",
                            "code": "10_平台功能介绍.md"
                        },
                        {
                            "id": 11,
                            "name": "账号密码登陆",
                            "desc": "使用账号和密码进行用户登陆，验证用户身份，授权用户访问系统资源。",
                            "code": "11_账号密码登陆.md"
                        },
                        {
                            "id": 12,
                            "name": "验证码开关",
                            "desc": "控制验证码功能的开关状态，用于增强系统的安全性，防止恶意攻击和访问。",
                            "code": "12_验证码开关.md"
                        },
                        {
                            "id": 13,
                            "name": "通知公告",
                            "desc": "发布系统通知和公告信息，向用户传达重要的消息和更新，提供及时的沟通和交流",
                            "code": "13_通知公告.md"
                        },
                        {
                            "id": 14,
                            "name": "平台教程列表",
                            "desc": "展示平台提供的教程列表，包括操作指南、教学视频等，帮助用户快速上手和使用",
                            "code": "14_平台教程列表.md"
                        },
                        {
                            "id": 15,
                            "name": "登陆次数限制",
                            "desc": "限制用户登陆的次数，防止暴力破解和恶意登陆，增加系统的安全性。",
                            "code": "15_登陆次数限制.md"
                        },

                        {
                            "id": 16,
                            "name": "登陆次数限制时间",
                            "desc": "限制用户登陆的次数，并设置限制时间，防止暴力破解和恶意登陆。",
                            "code": "16_登陆次数限制时间.md"
                        },
                        {
                            "id": 17,
                            "name": "登陆IP限制",
                            "desc": "限制用户登陆的IP地址范围，增加系统的安全性，防止未授权的访问。",
                            "code": "17_登陆IP限制.md"
                        },
                        {
                            "id": 18,
                            "name": "登陆IP限制时间",
                            "desc": "限制用户登陆的IP地址范围，并设置限制时间，提供更灵活的登陆控制。",
                            "code": "18_登陆IP限制时间.md"
                        },
                        {
                            "id": 19,
                            "name": "自定义登陆域名",
                            "desc": "允许用户自定义登陆系统的域名，提供个性化的访问方式。",
                            "code": "19_自定义登陆域名.md"
                        },
                        {
                            "id": 20,
                            "name": "手机验证码登陆",
                            "desc": "使用手机验证码进行用户登陆，提供另一种便捷的登陆方式。",
                            "code": "20_手机验证码登陆.md"
                        },
                        {
                            "id": 21,
                            "name": "微信绑定登陆",
                            "desc": "允许用户通过微信账号进行登陆，提供与微信的集成和互联功能。",
                            "code": "21_微信绑定登陆.md"
                        },
                        {
                            "id": 22,
                            "name": "自定义企业信息",
                            "desc": "允许用户自定义企业的相关信息，如名称、Logo等，展示企业形象。",
                            "code": "22_自定义企业信息.md"
                        },
                        {
                            "id": 23,
                            "name": "获取系统配置",
                            "desc": "获取系统的配置信息，如数据库连接、系统参数等，用于系统的运行和配置。",
                            "code": "23_获取系统配置.md"
                        },
                        {
                            "id": 24,
                            "name": "获取参数字典",
                            "desc": "获取系统中定义的参数字典，包括常用的选项和配置项，方便系统的使用和管理。",
                            "code": "24_获取参数字典.md"
                        },
                        {
                            "id": 25,
                            "name": "获取当前用户",
                            "desc": "获取当前登陆用户的信息，包括用户名、角色等，用于权限控制和个性化展示。",
                            "code": "25_获取当前用户.md"
                        },
                        {
                            "id": 26,
                            "name": "异常处理",
                            "desc": "处理系统运行过程中的异常情况，如错误日志记录、错误页面展示等。",
                            "code": "26_异常处理.md"
                        },
                        {
                            "id": 27,
                            "name": "内容复制",
                            "desc": "实现文本内容的复制功能，方便用户复制系统中的文本信息。",
                            "code": "27_内容复制.md"
                        },
                        {
                            "id": 28,
                            "name": "使用图标",
                            "desc": "使用图标字体或矢量图标，提供丰富的图标资源，美化系统界面。",
                            "code": "28_使用图标.md"
                        },
                        {
                            "id": 29,
                            "name": "权限使用",
                            "desc": "管理和控制系统中的权限，包括用户角色、权限分配等。",
                            "code": "29_权限使用.md"
                        },
                        {
                            "id": 30,
                            "name": "多级目录",
                            "desc": "支持多级目录结构，方便组织和管理系统中的模块和功能。",
                            "code": "30_多级目录.md"
                        },
                        {
                            "id": 31,
                            "name": "Request工具类",
                            "desc": "封装HTTP请求的工具类，提供简化的请求方法和参数处理。",
                            "code": "31_Request工具类.md"
                        },
                        {
                            "id": 32,
                            "name": "SessionStorage工具类",
                            "desc": "封装SessionStorage的操作方法，方便在前端存储和获取数据。",
                            "code": "32_SessionStorage工具类.md"
                        },
                        {
                            "id": 33,
                            "name": "Cookie工具类",
                            "desc": "封装Cookie的操作方法，方便在前端存储和获取数据。",
                            "code": "33_Cookie工具类.md"
                        },
                        {
                            "id": 34,
                            "name": "LocalStorage工具类",
                            "desc": "封装LocalStorage的操作方法，方便在前端存储和获取数据。",
                            "code": "34_LocalStorage工具类.md"
                        },
                        {
                            "id": 35,
                            "name": "用户信息编辑",
                            "desc": "允许用户编辑和修改个人信息，包括用户名、密码等。",
                            "code": "35_用户信息编辑.md"
                        },
                        {
                            "id": 36,
                            "name": "登陆日志",
                            "desc": "记录用户的登陆日志，包括登陆时间、IP地址等信息。",
                            "code": "36_登陆日志.md"
                        },
                        {
                            "id": 37,
                            "name": "在线会话管理",
                            "desc": "管理和监控系统中的在线会话，包括会话的创建、销毁等。",
                            "code": "37_在线会话管理.md"
                        },
                        {
                            "id": 38,
                            "name": "异常登陆拦截",
                            "desc": "拦截异常的登陆行为，如频繁尝试登陆、异常IP地址等。",
                            "code": "38_异常登陆拦截.md"
                        },
                        {
                            "id": 39,
                            "name": "踢人下线",
                            "desc": "强制将指定用户下线，中断其当前的会话和操作。",
                            "code": "39_踢人下线.md"
                        },

                        {
                            "id": 40,
                            "name": "最大登陆会话",
                            "desc": "限制同时存在的最大登陆会话数量，防止恶意登陆和滥用系统资源。",
                            "code": "40_最大登陆会话.md"
                        },
                        {
                            "id": 41,
                            "name": "最长登陆时间",
                            "desc": "设置用户登陆的最长时间，超过该时间将自动注销登陆，增加系统的安全性。",
                            "code": "41_最长登陆时间.md"
                        },
                        {
                            "id": 42,
                            "name": "单点登陆",
                            "desc": "实现用户在多个系统中使用同一组凭证进行登陆，提供便捷的用户体验。",
                            "code": "42_单点登陆.md"
                        },
                        {
                            "id": 43,
                            "name": "单点退出",
                            "desc": "实现用户在一个系统中退出登陆后，自动退出其他相关系统的登陆状态。",
                            "code": "43_单点退出.md"
                        },
                        {
                            "id": 44,
                            "name": "登陆条款编辑",
                            "desc": "允许管理员编辑和管理用户登陆时需要同意的条款和条件。",
                            "code": "44_登陆条款编辑.md"
                        },
                        {
                            "id": 45,
                            "name": "登陆隐私政策编辑",
                            "desc": "允许管理员编辑和管理用户登陆时需要同意的隐私政策。",
                            "code": "45_登陆隐私政策编辑.md"
                        },
                        {
                            "id": 46,
                            "name": "邮件二次登陆",
                            "desc": "使用邮件发送验证码进行二次登陆验证，提供额外的登陆安全保障。",
                            "code": "46_邮件二次登陆.md"
                        },
                        {
                            "id": 47,
                            "name": "令牌二次认证",
                            "desc": "使用令牌进行二次认证，增加登陆的安全性和防护能力。",
                            "code": "47_令牌二次认证.md"
                        },
                        {
                            "id": 48,
                            "name": "登陆数据加密",
                            "desc": "对用户登陆时传输的数据进行加密，保护用户的隐私和登陆信息。",
                            "code": "48_登陆数据加密.md"
                        },
                        {
                            "id": 49,
                            "name": "记住我安全加密",
                            "desc": "实现记住我功能时，对保存的凭证进行安全加密，防止凭证泄露。",
                            "code": "49_记住我安全加密.md"
                        },
                        {
                            "id": 50,
                            "name": "钉钉_微信扫描登陆",
                            "desc": "允许用户使用钉钉或微信扫描进行登陆，提供与钉钉和微信的集成功能。",
                            "code": "50_钉钉_微信扫描登陆.md"
                        }
                    ]
                }

            ]

        }
    },
    computed: {
    },
    methods: {
        clickCoding(tag) {
            ga('send', 'click', 'e.coding', 'Action', tag)
        }
    }
}

</script>


<style lang="stylus">
.technical-page-product-container {
    width: 100%;
    float: left;
    margin-top: 30px;

    .technical-page-header {
        padding: 10px 0px;
        margin-bottom: 30px;


    }
        .technical-page-title {
            font-size: 30px;
            font-weight: bold;
            margin-bottom: 20px;
        }

        .technical-page-items-panel {
            margin-bottom: 30px;
            float: left;
            width: 100%;
        }

        .technical-page-box {
            font-size: 30px;
            font-weight: bold;
            padding: 10px 0px;
        }

        .technical-page-box-desc {
            font-size: 16px;
            padding: 10px 0px;
            line-height: 30px;
            margin-bottom: 10px;
        }
        .item-list-box {
            float: left;
            width: 100%;

            ul {
                margin: 0px;
                padding: 0px;

                li.technical-page-item {
                    list-style: none;
                    float: left;
                    width: calc(33% - 70px);
                    padding: 24px;
                    box-shadow: 0 0 0 0 transparent;
                    border: 1px solid #dadce0;
                    border-radius: 8px;
                    margin-right: 20px;
                    margin-bottom: 20px;

                    .item-title {
                        color: #202124;
                        margin: 0;
                        word-wrap: normal;
                        font-size: 20px;
                        font-weight: 500;
                        letter-spacing: normal;
                        line-height: 28px;
                        margin-bottom: 10px;
                    }

                    .item-desc {
                        text-rendering: optimizeLegibility;
                        color: #5f6368;
                        font-size: 16px;
                        font-weight: 400;
                        letter-spacing: .1px;
                        line-height: 24px;
                    }
                }
            }
        }
}
</style>
